<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

  <link charset="utf-8" rel="stylesheet" href="js/element-ui/theme-chalk/index.css">
  <link charset="utf-8" rel="stylesheet" href="css/app.css">
  <link charset="utf-8" rel="stylesheet" href="css/app-elementui.css">

  <title>Word文档批量生成</title>
</head>

<body>

  <script src="js/vue.js"></script>
  <script src="js/element-ui/index.js"></script>

  <div class="app" id="page1">
    <el-container>
      <el-header style="height:auto">
        <h1>Word文档批量生成</h1>
      </el-header>
      <el-main>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="Excel文件">
            <el-input v-model="form.excelConfig" placeholder="选择 Excel 配置文件" style="width: calc(100% - 16px)">
              <i slot="suffix" class="el-input__icon el-icon-more" @click="getExcelConfig"></i>
            </el-input>
          </el-form-item>
          <el-form-item label="工作表">
            <el-select v-model="form.sheetName" placeholder="选择配置数据所在的工作表" style="width: calc(100% - 16px)">
              <el-option v-for="sheet in sheets" :label="sheet" :value="sheet"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Word模版">
            <el-input v-model="form.wordTemplate" placeholder="选择 Word 模版" style="width: calc(100% - 16px)">
              <i slot="suffix" class="el-input__icon el-icon-more" @click="getWordTemplate"></i>
            </el-input>
          </el-form-item>
          <el-form-item label="保存目录">
            <el-input v-model="form.saveFolder" placeholder="选择 Word 文档保存目录" style="width: calc(100% - 16px)">
              <i slot="suffix" class="el-input__icon el-icon-more" @click="getDir"></i>
            </el-input>
          </el-form-item>
          <el-form-item style="text-align: right">
            <el-button type="primary" style="margin-right: 16px" :disabled="showButton"
              @click="handleClick">生成Word文档</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>

  <script>
    var app = new Vue({
      el: '#page1',
      data: {
        form: {
          excelConfig: '',
          sheetName: '',
          wordTemplate: '',
          saveFolder: ''
        },
        sheets: []
      },
      methods: {
        getExcelConfig: async function () {
          this.form.excelConfig = await aardio.getExcelFile() || this.form.excelConfig
        },
        getWordTemplate: async function () {
          this.form.wordTemplate = await aardio.getWordFile() || this.form.wordTemplate
        },
        getDir: async function () {
          this.form.saveFolder = await aardio.getDir() || this.form.saveFolder
        },
        handleClick: function () {
          aardio.submit(JSON.stringify(this.form))
        },
        msgbox: function (msg) {
          this.$alert(msg, '提示', { confirmButtonText: '确定' });
        }
      },
      computed: {
        showButton: function () {
          return !((this.form.excelConfig) && (this.form.sheetName) && (this.form.wordTemplate) && (this.form.saveFolder))
        }
      },
      watch: {
        async 'form.excelConfig'(exPath) {
          this.sheets = JSON.parse(await aardio.getSheets(exPath))
          this.form.sheetName = this.sheets.length > 0 ? this.sheets[0] : ''
        }
      },
      mounted: async function () {
        //this.form = await aardio.init()
      }
    })
  </script>
</body>

</html>